<template>
  <div>
    <!-- 数据列表 -->
    <yd-table
      :formData="extendData"
      :tableConfig="tableConfig"
      :tableData="tableData"
      @sizeChangeHandler="handlerSearch"
      @currentChangeHandler="handlerSearch"
      @sortChangeHandler="handlerSearch"
    ></yd-table>
  </div>
</template>

<script setup name="SysList" lang="tsx">
import { affectSystem } from "@/api/ops-workbench/business-alarm-analysis/index";
import { ref, reactive } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
});

// 表单额外参数
const extendData = reactive({
  systemId: "",
  businessCode: "",
  ...props.params,
});
// 列表配置
const tableConfig = reactive({
  columns: [
    {
      label: "系统名称",
      prop: "systemName",
    },
    {
      label: "系统分类",
      prop: "typeStr",
    },
    {
      label: "请求量",
      prop: "reqCount",
    },
    {
      label: "告警请求量",
      prop: "alarmCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff9a0c">{val}</span>;
      },
    },
    {
      label: "失败请求量",
      prop: "failReqCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff5d84">{val}</span>;
      },
    },
    {
      label: "健康度",
      prop: "healthRate",
      formatter: (row: anyObj, val: ApiVal) => {
        return val !== null ? val + "%" : val;
      },
    },
  ],
  pagination: {
    pageSize: 10,
    pageNum: 1,
    total: 0,
  },
  loading: true,
  disableOrderNumber: true,
});
// 列表数据
const tableData = ref([]);
const searchData = ref<anyObj>({});

function reloadList(e: anyObj) {
  searchData.value = e;
  handlerSearch();
}
// 搜索
function handlerSearch() {
  const formData = {
    ...extendData,
    ...searchData.value
  };
  tableConfig.loading = true;
  affectSystem(formData).then((res: ApiResponse) => {
    tableConfig.loading = false;
    if (res.code === 0) {
      tableData.value = res.data.data;
      tableConfig.pagination.total = res.data.total;
    } else {
      proxy.$modal.msgError(res.msg);
    }
  });
}

// 默认当前时间最近一小时
/*endTime.value = formatDate(new Date());
searchData.value.endTime = endTime.value.substr(0, endTime.value.length - 2) + "00";
var sdtime1 = new Date(searchData.value.endTime);
var sdtime2 = sdtime1.setHours(sdtime1.getHours() - 1);
searchData.value.startTime = formatDate(new Date(sdtime2));*/
searchData.value.startTime = props.params.startTime;
searchData.value.endTime = props.params.endTime;
// handlerSearch();

defineExpose({
  reloadList
})
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
